<%@ page language="java"  
 import="com.jju.A1541.dao.*"
 import="java.util.*"
 import="com.jju.A1541.model.*"
contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mynote</title>
</head>
<body>
<div class=" col-md-8 publish wow fadeInUp" id="my"><!-- 将数据appendTo tbody 定义id -->
    <form class="form-horizontal" action="${APP_PATH}/user/regist"
          method="post">
            <div class="col-xs-6col-sm-3 product-grids">
                <div class="flip-container">
                    <div class="flipper agile-products">
                        <div class="front">
                            <img src="images/13.png" class="img-responsive" alt="img">
                        </div>
                        <div class="back">
                            <h4>累计捐赠旧衣</h4>
                            <h6>15<sup>件</sup></h6>
                            <form action="#" method="post">
                                <a href="#" data-toggle="modal" data-target="#myModal1">领取奖励</a>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        <div class="col-xs-6col-sm-3 product-grids">
            <div class="flip-container">
                <div class="flipper agile-products">
                    <div class="front">
                        <img src="images/13.png" class="img-responsive" alt="img">
                        <img src="images/13.png" class="img-responsive" alt="img">
                    </div>
                    <div class="back">
                        <h4>累计捐赠旧衣</h4>
                        <h6>30<sup>件</sup></h6>
                        <form action="#" method="post">
                            <a href="#" data-toggle="modal" data-target="#myModal1">领取奖励</a>
                        </form>
                    </div>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="col-xs-6col-sm-3 product-grids">
            <div class="flip-container">
                <div class="flipper agile-products">
                    <div class="front">
                        <img src="images/13.png" class="img-responsive" alt="img">
                        <img src="images/13.png" class="img-responsive" alt="img">
                        <img src="images/13.png" class="img-responsive" alt="img">
                    </div>
                    <div class="back">
                        <h4>累计捐赠旧衣</h4>
                        <h6>45<sup>件</sup></h6>
                        <form action="#" method="post">
                            <a href="#" data-toggle="modal" data-target="#myModal1">领取奖励</a>
                        </form>
                    </div>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </form>
    <!-- modal -->
    <div class="modal video-modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="col-md-7 modal_body_right single-top-right">
                            <h3 class="item_name">领取成功！</h3>
                            <div class="single-rating">
                                <ul>
                                <li><a href="#">当前徽章数量</a></li>
                                    <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                    <li class="w3act"><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                    <li>当徽章数量达到5,您将会在下次捐衣的时候获得我们送出的小礼物哦<a href="#"><i class="fa fa-gift" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <!-- //modal -->
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/mynote.js" type="text/javascript"></script>
<script src="js/reveal.js " type="text/javascript"></script>
</body>
</html>
